<template>
  <div>
    <van-nav-bar title="商品列表" left-arrow @click-left="$router.push('/search')" />
    <van-search show-action>
      <template #action>
        <div class="box">
          <van-icon name="apps-o" />
        </div>
      </template>
    </van-search>
    <van-grid :column-num="3" :border="false">
      <van-grid-item text="综合" style="color: red;" />
      <van-grid-item text="销量" />
      <van-grid-item text="价格" />
    </van-grid>

    <van-swipe-cell>
  <van-card
    price="2.00"
    desc="描述信息"
    title="商品标题"
    class="goods-card"
    thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
  />
  <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>
  </div>
</template>

<script>
export default {
  name: 'DetailView'
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar .van-icon {
  color: #000;
}

/deep/ .van-nav-bar__arrow {
  font-size: 20px;
}

/deep/.van-field__left-icon {
  margin-left: 150px;
}

/deep/.van-search__content {
  border-radius: 30px;
}

/deep/.van-icon {
  font-size: 20px;

}
</style>
